/**
 * React 中 动态类名的绑定。
 *    最基础的玩法：
 *      <button className={curTabName === "Tab1" ? "active" : ""}>Tab1</button>
        <button className={classNames(["button", { active: curTabName === "Tab1" }])}>Tab2</button>
        <button className={curTabName === "Tab3" ? "active" : ""}>Tab3</button>

   React 中不支持同名属性的多次编写，不像 Vue 中对 class 与 style 做了特殊的合并操作
        <button className="button" className={curTabName === "Tab1" ? "active" : ""}>Tab1</button>
  
   React 中想要让动态类名更好的操作的化，可以使用一个第三方的模块 classnames
        该模块提供一个 classnames 的函数，语法如下：

        const className = classnames('box1', 'box2', 'box3)
          "box1 box2 box3"
        const className = classnames({
          box1: true,
          box2: false,
          box3: curTabName === 'Tab1'
        })
          "box1"
        const className = classnames(['box1', 'box2', { box3: true }])
          "box1 box2 box3"

 */

import classNames from "classnames";

let curTabName = "Tab1";

console.log(classNames(["button", { active: curTabName === "Tab1" }]));

export default function App() {
  return (
    <div>
      <h1>Tab 选项卡</h1>

      {/* <button className={curTabName === 'Tab1' ? 'button button1 active' : 'button button1'}></button> */}

      <button
        className={classNames(["button", { active: curTabName === "Tab1" }])}
      >
        Tab1
      </button>
      <button
        className={classNames(["button", { active: curTabName === "Tab2" }])}
      >
        Tab2
      </button>
      <button
        className={classNames(["button", { active: curTabName === "Tab3" }])}
      >
        Tab3
      </button>
    </div>
  );
}
